<template>
  <div>
    <!-- 搜索框 -->
    <a-row justify="space-between">
      <a-col>
        <a-form :model="searchForm" layout="inline">
          <a-form-item label="装备名称">
            <a-input v-model="searchForm.eqName"></a-input>
          </a-form-item>
          <a-form-item label="资源分类代码">
            <a-input v-model="searchForm.resourceTypeCode"></a-input>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col>
        <a-row>
          <a-col>
            <a-button type="primary">查询</a-button>
          </a-col>
          <a-col :push="1">
            <a-button>重置</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row style="margin: 20px 0;">
      <a-col :span="3">
        <a-button>导出</a-button>
      </a-col>
      <a-col :span="3">
        <a-button>导入</a-button>
      </a-col>
      <a-col :span="4">
        <a-button style="background-color: #70B603;">自动赋码</a-button>
      </a-col>
      <a-col>
        <a-button danger>删除维修单元</a-button>
      </a-col>
    </a-row>
    <MyTable :columns="columns" :tableData="tableData"></MyTable>
    <canvas ref="qrCanvas"></canvas>
    <a-modal title="查看" v-model:open="isShowTableModal" style="width: 80%;">
      <a-row justify="space-between">
        <a-col :span="10">
          <a-descriptions layout="vertical">
            <a-descriptions-item label="资源实力名称">{{ rowData.resourceName }}</a-descriptions-item>
            <a-descriptions-item label="唯一识别码"></a-descriptions-item>
          </a-descriptions>
          注释：最小维修单元来源于装备实力，可以导入或者在装备实力中创建。
        </a-col>
        <a-col :span="8">
          <a-form :label-col="{ span: 9 }" :model="tableModalFormData">
            <a-form-item label="最小维修单元名称">
              <a-input v-model="tableModalFormData.minUploadUnitName"></a-input>
            </a-form-item>
            <a-form-item label="赋码状态">
              <a-select v-model="tableModalFormData.giveCodeType">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="已赋码">已赋码</a-select-option>
                <a-select-option value="未赋码">未赋码</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col>
          <a-button>查询</a-button>
          <a-button>重置</a-button>
          <a-button>返回</a-button>
        </a-col>
      </a-row>
      <MyTable :columns="tableModalColumns" :tableData="tableModalData"></MyTable>
      <MyModal @afterOk="afterOk" @afterCancel="afterCancel" :isShowModal="isShowModal" :testContent2="testContent2">
      </MyModal>
    </a-modal>
    <!-- 二维码弹窗 -->
    <a-modal id="qrCodeModal" ref="qrCodeModal" title="二维码" v-model:open="isShowQRCodelModal">
      <canvas ref="qrCanvas"></canvas>
      <a-row>
        <a-col>
          <a-button @click="downloadQRcode">下载二维码</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import QRCode from 'qrcode'
// 搜索表单数据
const searchForm = ref({})

// 表格列
const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    customRender: ({ text, record, index }) => `${index + 1}`,
    align: 'center',
  },
  {
    title: "资源名称",
    dataIndex: 'resourceName',
    key: 'resourceName'
  },
  {
    title: "资源分类代码",
    dataIndex: 'resourceCode',
    key: 'resourceCode'
  },
  {
    title: "资源编码",
    dataIndex: 'resourceCode',
    key: 'resourceCode'
  },
  {
    title: "单元数量",
    dataIndex: 'unitNumber',
    key: 'unitNumber'
  },
  {
    title: "资源负责人",
    dataIndex: 'resourceOwner',
    key: 'resourceOwner'
  },
  {
    title: "维护人",
    dataIndex: 'resourceUplpader',
    key: 'resourceUplpader'
  },
  {
    title: "维护日期",
    dataIndex: 'uploadTime',
    key: 'uploadTime'
  },
  {
    title: "操作",
    dataIndex: '操作',
    btnArr: [
      {
        label: '查看',
        activeIsShow: true,
        onClick: ({ record }) => {
          openTableModal()
          rowData.value = record
          record.codeStatus = '查看'
        }
      },
      {
        label: '删除维修单元',
        activeIsShow: true,
        onClick: () => {
          console.log('删除维修单元')
        }
      },
    ]
  }

]
// 表格数据
const tableData = ref([
  {
    resourceName: 'xxxxxxxxxxxxxxxxxxx',
    resourceCode: 'xxxx',
    resourceCode: '',
    unitNumber: 2,
    resourceOwner: '张三',
    resourceUplpader: 'xxxx',
    uploadTime: '2018-09-09 14:00:00'
  }
])
// 树形表格弹窗
// 显隐控制
const isShowTableModal = ref(false)
// 当前点击数据
const rowData = ref({})
// 弹窗搜索表单数据
const tableModalFormData = ref({})
// 弹窗表格列
const tableModalColumns = [
  {
    title: '最小维修单元名称',
    dataIndex: "minUploadUnitName",
    key: 'minUploadUnitName'
  },
  {
    title: '最小维修单元编码',
    dataIndex: "minUploadUnitCode",
    key: 'minUploadUnitCode'
  },
  {
    title: '型号',
    dataIndex: "modelNumber",
    key: 'modelNumber'
  },
  {
    title: '赋码状态',
    dataIndex: "giveCodeStatus",
    key: 'giveCodeStatus'
  },
  {
    title: '负责人',
    dataIndex: "resourceOwner",
    key: 'resourceOwner'
  },
  {
    title: '维护人',
    dataIndex: "resourceUplpader",
    key: 'resourceUplpader'
  },
  {
    title: '维护时间',
    dataIndex: "uploadTime",
    key: 'uploadTime'
  },
  {
    title: '操作',
    dataIndex: '操作',
    btnArr: [
      {
        label: '查看',
        activeIsShow: ({ record }) => {
          return record.giveCodeStatus === '已赋码'
        },
        onClick: ({ record }) => {
          console.log(record)
          text.value = JSON.stringify(record)
          generateQRCode()
        }
      },
      {
        label: '赋码',
        activeIsShow: ({ record }) => {
          return record.giveCodeStatus === '未赋码'
        },
        onClick: ({ record }) => {
          testContent2.value = {
            isShowModal: true,
            title: '赋码',
            contentList: [
              {
                id: 1,
                type: 'text',
                text: '此操作将为该最小维修单元自动赋码，是否继续？'
              }
            ]
          }
          console.log(record)
        }
      },
      {
        label: '删除',
        activeIsShow: true,
        onClick: ({ record }) => {
          tableModalRow.value = record
          isShowModal.value = true
          testContent2.value.isShowModal = true
        }
      },
      {
        label: '二维码',
        activeIsShow: ({ record }) => {
          return record.giveCodeStatus === '已赋码'
        },
        onClick: ({ record }) => {
          isShowQRCodelModal.value = true
          text.value = JSON.stringify(record)
          generateQRCode()
        }
      }
    ]
  }
]
// 弹窗表格数据
const tableModalData = ref([
  {
    minUploadUnitName: 'xxxx',
    minUploadUnitCode: 'xxxx',
    modelNumber: 'xxxx',
    giveCodeStatus: '已赋码',
    resourceOwner: '张三',
    resourceUplpader: 'xxxx',
    uploadTime: '2018-09-09 14:00:00',
    children: [
      {
        minUploadUnitName: 'xxxx',
        minUploadUnitCode: 'xxxx',
        modelNumber: 'xxxx',
        giveCodeStatus: '未赋码',
        resourceOwner: '李四',
        resourceUplpader: 'xxxx',
        uploadTime: '2018-09-09 14:00:00',
      }
    ]
  }
])
// 打开弹窗
const openTableModal = () => {
  isShowTableModal.value = true
}
// 表格弹窗点击数据
const tableModalRow = ref({})
// 弹窗表格的弹窗
const isShowModal = ref(false)
const afterOk = () => {
  testContent2.value.isShowModal = false
  if (testContent2.value.title === '删除') {
    console.log(tableModalRow, 'tableModalRow----------------')
  } else if (testContent2.value.title === '赋码') {
    console.log('赋码', tableModalRow)
  }
}
const afterCancel = () => {
  testContent2.value.isShowModal = false
  console.log('关闭')
}
// 删除
const testContent2 = ref({
  isShowModal: false,
  title: '删除',
  contentList: [
    {
      id: 1,
      type: 'text',
      text: '此操作将删除实力及最小维修单元，是否继续？'
    }
  ]
})
// 二维码弹窗
const isShowQRCodelModal = ref(false)
const text = ref('1234567890')
const qrCanvas = ref()
const generateQRCode = () => {
  setTimeout(() => {
    QRCode.toCanvas(qrCanvas.value, text.value, error => {
      if (error) console.error(error)
    })
  }, 100)
}
// 下载二维码
const downloadQRcode = () => {
  let img = qrCanvas.value.toDataURL('image/png')
  let save = document.createElement('a')
  save.href = img
  save.download = '二维码'
  save.click()
}
</script>
<style scoped lang="less"></style>
